<template>
  <div class="sdy-home-nav-list">
    <van-swipe
      class="swiper-container"
      :duration="300"
      :loop="false"
      indicator-color="red">
      <van-swipe-item>
        <!-- 宫格展示 -->
        <van-grid :border="false" :column-num="5">
          <van-grid-item 
          v-for="item in navs" 
          :key="item.id"
          :icon="item.img" 
          :text="item.title" />
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid :border="false" :column-num="5">
          <van-grid-item 
          v-for="item in navs" 
          :key="item.id"
          :icon="item.img" 
          :text="item.title" />
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup lang="ts">
const navs = [
  { id: 1, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 2, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 3, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 4, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 5, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 6, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 7, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 8, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 9, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' },
  { id: 10, title: '啥都有超', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png' }
]
</script>

<style scoped lang="scss">
  .sdy-home-nav-list{
    height: 210px;
    box-sizing: border-box;
    padding: 15px;

    > .swiper-container{
      height: 100%;
    }
  }

</style>